<template>
  <div class='page-order-list vux-1px-t'>
      <swipeout>
        <group>
          <swipeout-item transition-mode='follow'
                         :auto-close-on-button-click="true"
                         v-for='order in orderList'>
            <div slot='right-menu'>
              <swipeout-button type="warn" @click.native="delOrder(order.tradeNo)">
                删除
              </swipeout-button>
              <swipeout-button type="primary" @click.native="viewOrderDetail(order.tradeNo)">
                查看
              </swipeout-button>
            </div>
            <div slot='content' class="vux-1px-t">
              <cell is-link
                    :title="order.subject"
              >
                <span slot="icon" class="ion-ios-copy-outline"
                      style="margin-right: 5px;font-size: 30px;line-height: 1;color: #999;align-self:flex-start"></span>
                <span slot="inline-desc" style="font-size: 12px;color: #aaa">
                  购买时间：{{order.createTime}}
                  <br>
                  购买状态：{{order.payStatus}}
                  <br>
                  支付方式：{{order.payType}}
                  <br>
                  {{order.tradeNo}}
                </span>
              </cell>
            </div>
          </swipeout-item>
        </group>
      </swipeout>
  </div>
</template>

<script>
  import { Swipeout, SwipeoutItem, SwipeoutButton, Cell, CellBox, Group } from 'vux'
  import service from '../models/services'
  import moment from 'moment'
  import payTypeDict from '../models/payTypeDict'
  import payStatusDict from '../models/payStatusDict'

  export default {
    data () {
      return {
        orderList: [
          {
            id: 2,
            tradeNo: 'VD20170509223527e89ece9896cf46d0b53a1a230b7d8cf8',
            subject: '视频购买',
            payType: 0,
            payStatus: 0,
            isDeleted: 0,
            createTime: 0,
            buyCartEntities: [
              {
                id: 8,
                cid: 1,
                sid: 4,
                createTime: 1494233651
              },
              {
                id: 9,
                cid: 1,
                sid: 1,
                createTime: 1494299904
              },
              {
                id: 10,
                cid: 1,
                sid: 2,
                createTime: 1494299910
              }
            ]
          },
          {
            id: 2,
            tradeNo: 'VD20170509223527e89ece9896cf46d0b53a1a230b7d8cf8',
            subject: '视频购买',
            payType: 0,
            payStatus: 0,
            isDeleted: 0,
            createTime: 0,
            buyCartEntities: [
              {
                id: 8,
                cid: 1,
                sid: 4,
                createTime: 1494233651
              },
              {
                id: 9,
                cid: 1,
                sid: 1,
                createTime: 1494299904
              },
              {
                id: 10,
                cid: 1,
                sid: 2,
                createTime: 1494299910
              }
            ]
          },
          {
            id: 2,
            tradeNo: 'VD20170509223527e89ece9896cf46d0b53a1a230b7d8cf8',
            subject: '视频购买',
            payType: 0,
            payStatus: 0,
            isDeleted: 0,
            createTime: 0,
            buyCartEntities: [
              {
                id: 8,
                cid: 1,
                sid: 4,
                createTime: 1494233651
              },
              {
                id: 9,
                cid: 1,
                sid: 1,
                createTime: 1494299904
              },
              {
                id: 10,
                cid: 1,
                sid: 2,
                createTime: 1494299910
              }
            ]
          }
        ]
      }
    },
    methods: {
      getOrderList () {
        return service.order.list()
          .then((response) => {
            if (response.data.code === 0) {
//              this.orderList = response.data.result
//              this.orderList = response.data.result
              this.orderList.forEach((o) => {
                o.createTime = moment(o.createTime * 1000).format('YYYY-MM-DD')
                o.payType = payTypeDict[o.payType] || 'unknow'
                o.payStatus = payStatusDict[o.payStatus] || 'unknow'
              })
            }
          })
      },
      viewOrderDetail (tradeNo) {
        this.$router.push({
          name: 'orderDetail',
          params: {
            tradeNo: tradeNo
          }
        })
      },
      delOrder (no) {
        const self = this

        this.$vux.confirm.show({
          title: ' 警告',
          content: '您要删除该订单吗？',
          onShow () {
          },
          onHide () {
          },
          onCancel () {
          },
          onConfirm () {
            const toast = self.$vux.toast
            service.order.delete(no)
              .then((res) => {
                if (res.data.code === 0) {
                  toast.show({
                    text: '删除成功'
                  })
                  self.getOrderList()
                } else {
                  toast.show({
                    type: 'warn',
                    text: '删除失败'
                  })
                }
              })
          }
        })
      }
    },
    components: {
      Swipeout,
      SwipeoutItem,
      SwipeoutButton,
      CellBox,
      Group,
      Cell
    },
    mounted () {
      this.getOrderList()
    }
  }
</script>
